<!-- 昵称 -->
<template>
	<view class="index pd-lr36">
		<view class="mt10"><text class="title">我的名字</text></view>
		<view class="inputs">
			<input class="input-text" type="text" v-model="values" placeholder-class="placeholder-class" placeholder="请填写昵称" maxlength="10" :adjust-position="false" />
			<view v-if="values" @click.stop="handleClose()" class="close">×</view>
		</view>
		<view class="mt10">
			<text>{{ values.length }}/10</text>
		</view>
	</view>
</template>

<script>
import { apiPostInfoUpdate } from '@/api/me.js';
import {newData}from "@/utils/common.js"
export default {
	components: {},
	data() {
		return {
			values: ''
		};
	},
	onLoad(data) {
		this.values = data.nickname;
	},
	onNavigationBarButtonTap() {
		if(this.values){
			apiPostInfoUpdate({nickname:this.values}).then(res=>{
				newData()
			})
		}else{
			uni.showToast({
				title:"请输入昵称",
				icon:'none'
			})
		}
		
	},
	watch: {
		values(val) {
			// #ifdef APP-PLUS
			//
			if (val) {
				var webView = this.$mp.page.$getAppWebview();
				webView.setTitleNViewButtonStyle(0, {
					color: '#FC315A'
				});
			} else {
				var webView = this.$mp.page.$getAppWebview();
				webView.setTitleNViewButtonStyle(0, {
					color: '#747384'
				});
			}
			// #endif
		}
	},
	methods: {
		handleClose() {
			console.log(5456456)
			this.values = '';
		}
	}
};
</script>

<style scoped lang="scss">
.index {
	font-size: 24upx;
	height: 100%;
	color: #747384;
}
.placeholder-class {
	font-size: 28upx;
}
.inputs {
	margin-top: 40upx;
	padding: 18upx 0;
	height: 80upx;
	line-height: 80upx;
	box-sizing: border-box;
	border-bottom: 1px solid #1c1b2b;
	position: relative;
}
.input-text {
	height: 28upx;
	width: 80%;
	line-height: 28upx;
	color: #fff;
}
.close {
	position: absolute;
	right: 0;
	display: block;
	font-size: 34upx;
	top: 26upx;
	color: #d6d4e2;
	text-align: center;
	line-height: 28upx;
	width: 10%;
	height: 80upx;
}
.mt10 {
	margin-top: 20upx;
}
</style>
